<template>
  <el-tree-select
    v-model="selectAreaId"
    :data="areaTree"
    :props="defaultProps"
    :multiple="multiple"
    :show-checkbox="multiple"
    clearable
    filterable
    class="w-100%"
    node-key="id"
    placeholder="请选择区县"
  />
</template>
<script lang="ts" setup>
import { defaultProps } from '@/utils/tree'
import { oneOfType } from 'vue-types'
import { propTypes } from '@/utils/propTypes'
import { getAreaTree } from '@/api/system/area'

/** 区县选择组件 */
defineOptions({ name: 'AreaPicker' })

const props = defineProps({
  modelValue: oneOfType<number | number[] | string | string[]>([
    Number,
    Array<Number>,
    String,
    Array<String>
  ]),
  multiple: propTypes.bool.def(false)
})

/** 选中的区县编码 */
const selectAreaId = computed({
  get: () => {
    return props.modelValue
  },
  set: (val: number | number[] | string | string[]) => {
    emit('update:modelValue', val)
  }
})

/** 区县选择 */
const emit = defineEmits(['update:modelValue'])

/** 初始化 **/
const areaTree = ref<any>([]) // 区县树
onMounted(async () => {
  // 获得区县树
  const data = await getAreaTree()
  console.log('response: ' + JSON.stringify(data))
  areaTree.value = data
  console.log('tree: ' + JSON.stringify(areaTree.value))
})
</script>
